<template>
  <div class="page-container">
    <h2>{{ title }}</h2>
    <div class="md-html" v-html="content" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, onUpdated } from 'vue';
  import { useRoute } from 'vue-router';
  import { load } from '@/service/site-docs';
  import { BaseObject } from '@/types/global';

  declare const hljs: any;

  export default defineComponent({
    name: 'Doc',
    components: {},
    setup() {
      const route = useRoute();
      const docName = route.params.name as string;
      const content = ref('');
      const title = ref('');
      load(docName).then((doc: BaseObject) => {
        content.value = doc.html;
        title.value = doc.attributes.title;
      });
      function highlight() {
        document.querySelectorAll('pre code').forEach((el: HTMLElement) => {
          hljs.highlightElement(el);
        });
      }
      onMounted(highlight);
      onUpdated(highlight);
      return {
        title,
        content,
      };
    },
  });
</script>
<style lang="less"></style>
